<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="<%=request.getContextPath()%>/res/jquery/jquery-1.8.2.min.js" />
        <script src="<%=request.getContextPath()%>/res/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){       
                
//                var i = $('input').size() + 1;
                var i = $('input').size();
                $('<div>Field 0 : <input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('#form');
 
                $('#add').click(function() {
                    $('<div>Field ' + i + ' : <input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('#form');
                    i++;
                });
 
                $('#remove').click(function() {
                    if(i > 1) {
                        $('.field:last').remove();
                        i--;
                    }
                });
 
                $('#reset').click(function() {
                    while(i > 2) {
                        $('.field:last').remove();
                        i--;
                    }
                });
 
                // here's our click function for when the forms submitted
 
                $('#submit').click(function(){
                    var answers = [];
                    $.each($('.field'), function() {
                        answers.push($(this).val());
                    });
                    if(answers.length == 0) {
                        answers = "none";
                    }  
                    alert(answers);
                    return false; 
                });
            });   
        </script>
    </head>
    <body>
        <div id="add">Add</div>
        <div id="form"></div>
        <input type="submit" id="submit" value="Submit" />
    </body>
</html>
